﻿<style>
    #profileTable td {
        padding-bottom: 10px;
    }

    .inputField {
        margin-top: 5px;
        width: 100%;
        box-sizing: border-box;
        height: 30px;
    }

    .note {
        font-size: 10px;
        vertical-align: bottom;
    }

    .section {
        font-size: 32px;
        display: inline-block;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .leftColumn {
        width: 50%;
    }

    .rightColumn {
        padding-left: 50px;
    }

    .phoneNumberContainer {
        float: left;
        padding-right: 20px;
        width: calc(75% - 25px);
    }

    .extensionContainer {
        float: left;
        width: 25%;
    }

    .expiryMonthContainer {
        float: left;
        width: calc(50% - 10px);
        padding-right: 10px;
    }

    .expiryYearContainer {
        float: left;
        width: calc(50% - 10px);
        padding-left: 10px;
    }
</style>

<script id="newCustomerProfile-template" type="text/html">
    <table id="profileTable" style="width: 50%; min-width: 600px;">
        <tr>
            <td class="leftColumn">
                <label>Advisor ID</label><br />
                <input type="text" class="inputField" data-bind="textinput: viewModel.AdvisorId" />
            </td>
            <td class="rightColumn note">
                <label>
                    If you were referred to us by an advisor, please enter <br /> the advisor ID number in the box below.
                </label>
            </td>
        </tr>
        <tr>
            <td colspan="2" class="section">
                <label>Company Information</label>
            </td>
        </tr>
        <tr>
            <td class="leftColumn">
                Country<br />
                <select class="inputField" data-bind="options: viewModel.Countries, value: viewModel.Country, optionsText: 'Name', optionsValue: 'Id'"></select>
            </td>
            <td class="rightColumn">
                <label>Company Name</label><br />
                <input id="CompanyName" name="CompanyName" type="text" class="inputField" data-bind="textinput: viewModel.CompanyName" required="required" />
            </td>
        </tr>
        <tr>
            <td class="leftColumn">
                Address line 1
                <input id="AddressLine1" name="AddressLine1" type="text" class="inputField" data-bind="textinput: viewModel.AddressLine1" required="required" />
            </td>
            <td class="rightColumn">
                Address line 2
                <input type="text" class="inputField" data-bind="textinput: viewModel.AddressLine2" />
            </td>
        </tr>
        <tr>
            <td class="leftColumn">
                City
                <input id="City" name="City" type="text" class="inputField" data-bind="textinput: viewModel.City" />
            </td>
            <td class="rightColumn">
                State/Province
                <input id="State" name="State" type="text" class="inputField" data-bind="textinput: viewModel.State" />
            </td>
        </tr>
        <tr>
            <td class="leftColumn">
                Zip / Postal code
                <input id="ZipCode" name="ZipCode" type="text" class="inputField" data-bind="textinput: viewModel.ZipCode" />
            </td>
            <td class="rightColumn">
                Website (optional)
                <input id="Website" name="Website" type="text" class="inputField" data-bind="textinput: viewModel.Website" />
            </td>
        </tr>
        <tr>
            <td class="section" colspan="2">
                <label>Contact Information</label>
            </td>
        </tr>
        <tr>
            <td class="leftColumn">
                <label>Email address (login)</label>
                <input id="Email" name="Email" type="email" class="inputField" data-bind="textinput: viewModel.Email" />
            </td>
            <td class="rightColumn note">
                Make sure you enter a valid email address. It will be the main point of contact to <br />
                send you important information to get you started and to set up your payment data.
            </td>
        </tr>
        <tr>
            <td class="leftColumn">
                Password
                <input id="Password" name="Password" type="password" class="inputField" data-bind="textinput: viewModel.Password" />
            </td>
            <td class="rightColumn">
                Re-enter password
                <input id="ReenterPassword" name="ReenterPassword" type="password" class="inputField" data-bind="textinput: viewModel.PasswordConfirmation" />
            </td>
        </tr>
        <tr>
            <td class="leftColumn">
                First name
                <input id="FirstName" name="FirstName" type="text" class="inputField" data-bind="textinput: viewModel.FirstName" />
            </td>
            <td class="rightColumn">
                Last name
                <input id="LastName" name="LastName" type="text" class="inputField" data-bind="textinput: viewModel.LastName" />
            </td>
        </tr>
        <tr>
            <td class="leftColumn">
                <div class="phoneNumberContainer">
                    Phone number<br />
                    <input id="Phone" name="Phone" type="text" class="inputField" data-bind="textinput: viewModel.Phone" />
                </div>
                <div class="extensionContainer">
                    Extension<br />
                    <input id="Extension" name="Extension" type="text" class="inputField" data-bind="textinput: viewModel.Extension" />
                </div>
            </td>
            <td class="rightColumn"></td>
        </tr>
        <tr>
            <td colspan="2" class="section">
                <label>Office 365</label>
            </td>
        </tr>
        <tr>
            <td class="leftColumn">
                Domain prefix
                <input id="DomainPrefix" name="DomainPrefix" type="text" class="inputField" style="margin-bottom: 5px;" data-bind="textinput: viewModel.DomainPrefix" /><br />
                <label class="note">
                    Your domain prefix will appear after the &#64; in your initial Office 365 email address.
                    It has to be unique, and it can't contain any punctuation. Example: yourcompany
                </label>
            </td>
            <td class="rightColumn" style="vertical-align: top;">
                <label style="display: inline-block;">Username</label><br>
                <div style="height: 20px; padding-top: 10px; padding-bottom: 10px; vertical-align: middle;">
                    <label style="height: 30px; font-size: 16px;" data-bind="text: viewModel.UserName"></label>
                </div>
                <label class="note">This will be the user id you'll use with your Office 365 account.</label>
            </td>
        </tr>
        <tr>
            <td colspan="2" class="section">
                <label>Credit card information</label>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <img src="/Content/Images/Plugins/credit-card.png" style="width: 200px;" />
            </td>
        </tr>
        <tr>
            <td class="leftColumn">
                Credit card type
                <select class="inputField" data-bind="options: viewModel.CreditCardTypes, value: viewModel.CardType"></select>
            </td>
            <td class="rightColumn">
                Card holder name
                <input id="CardHolderName" name="CardHolderName" type="text" class="inputField" data-bind="textinput: viewModel.CardHolderName" />
            </td>
        </tr>
        <tr>
            <td class="leftColumn">
                Card number
                <input id="CardNumber" name="CardNumber" type="text" class="inputField" data-bind="textinput: viewModel.CardNumber" />
            </td>
            <td class="rightColumn">
                Expriration date <br />
                <div class="expiryMonthContainer">
                    <select class="inputField" data-bind="options: viewModel.Months, value: viewModel.Month, optionsText: 'Name', optionsValue: 'Id'"></select>
                </div>
                <div class="expiryYearContainer">
                    <select class="inputField" data-bind="options: viewModel.Years, value: viewModel.Year"></select>
                </div>
            </td>
        </tr>
        <tr>
            <td class="leftColumn">
                <label>Verification numer (CVN)</label><br />
                <input id="CardCvn" name="CardCvn" type="text" class="inputField" style="width: calc(100% - 54px)" data-bind="textinput: viewModel.CardCvn" />
                <img id="cnvImage" src="/Content/Images/Plugins/csv.png" style="width:40px; vertical-align: bottom; padding-left: 10px;" />
            </td>
            <td class="rightColumn">
            </td>
        </tr>
    </table>
</script>